Шаг 4. Размещаем проект на хостинге GitHub Pages

Для начала перейдём в раздел Settings.

Красная стрелка указывает на раздел Settings
Красная стрелка указывает на раздел Settings

Затем перейдём в раздел Pages.

Красная стрелка указывает на раздел Pages
Красная стрелка указывает на раздел Pages

После этого откроется раздел Pages.

Открыт раздел Pages
Открыт раздел Pages

Из самого интересного здесь — подразделы Source и Branch. В подразделе Source при нажатии на кнопку, которая установлена по умолчанию Deploy from a branch, откроется выпадающее меню.

Красная стрелка указывает на кнопку Deploy from a branch
Красная стрелка указывает на кнопку Deploy from a branch

В этом выпадающем меню можно выбрать GitHub Actions или Deploy from a branch. Через GitHub Actions можно подключить разные инструменты для автоматизации рутинных задач. Также через него можно использовать фреймворки, да и в целом кастомизировать процесс сборки. Нас же больше интересует второй вариант — Deploy from a branch, который установлен по умолчанию. С его помощью мы будем деплоить одну из наших веток, то есть размещать проект на хостинге.

В подразделе Branch нажмём на кнопку None. Появится выпадающее меню.

Красная стрелка указывает на кнопку None
Красная стрелка указывает на кнопку None

В нём выбираем, какую ветку будем деплоить. В нашем случае доступна только ветка main, поэтому её и выберем.

После этого появится ещё одна кнопка — /(root). По нажатию на неё откроется выпадающее меню, в котором будет предложено выбрать директорию. Это своего рода источник, из которого будет выполнена публикация.

Красная стрелка указывает на кнопку /(root)
Красная стрелка указывает на кнопку /(root)

Обычно оставляют значение по умолчанию, то есть /root. Это означает, что источником будет корневая директория. Если вы решите выбрать /docs, то данная директория должна присутствовать в вашем проекте, иначе вы получите ошибку. Так как у нас нет такой директории, оставим значение по умолчанию и нажмём на кнопку Save.

Красная стрелка указывает на кнопку Save
Красная стрелка указывает на кнопку Save

После этого раздел Pages перезагрузится, и появится дополнительный подраздел Custom domain. В нём можно привязать более красивый домен для вашего проекта.

Обновлённый раздел Pages с подразделом Custom domain
Обновлённый раздел Pages с подразделом Custom domain

Далее нужно подождать 2–3 минуты, так как происходит деплой, а затем перезагрузить страницу вручную. После этого появится уведомление о том, что проект задеплоился и можно перейти на сайт.

Красная стрелка указывает на уведомление об успешном деплое
Красная стрелка указывает на уведомление об успешном деплое

Теперь можно перейти по адресу, указанному в уведомлении — https://githtmlacademy.github.io/git-htmlacademy/. Этот адрес состоит из имени пользователя и названия проекта. У вас, возможно, будут другие данные. Затем нажмём на кнопку Visit site и посмотрим, что опубликовалось.

Красная стрелка указывает на кнопку Visit site
Красная стрелка указывает на кнопку Visit site

Сразу открылась новая вкладка в браузере. Мы видим, что на сайте даже есть немного контента — мы его добавляли на курсе.

Открыт сайт с нашим проектом
Открыт сайт с нашим проектом